<template>
  <view class="container">
	  
    <!-- 用户信息 -->
    <view class="user-info">
      <!-- <image :src="userInfo.avatar" class="avatar"></image> -->
	  <u-icon name="account-fill" class="postMsg"></u-icon>
      <text class="username">{{ userInfo.username }}</text>
    </view>

    <!-- 帖子标题 -->
    <view class="post-title">
      {{ post.title }}
    </view>

    <!-- 帖子图片 -->
    <view class="post-image">
      <image :src="post.image" mode="widthFix"></image>
    </view>

    <!-- 帖子内容 -->
    <view class="post-content">
      {{ post.content }}
    </view>

    <!-- 点赞、收藏、评论按钮 -->
    <view class="interaction-buttons">
      <button @click="handleCollect">收藏</button>
      <button @click="handleComment">评论</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息
      userInfo: {
        avatar: 'https://example.com/avatar.jpg',
        username: '张三'
      },
      // 帖子数据
      post: {
        title: '帖子标题',
        image: 'https://cdn.uviewui.com/uview/album/1.jpg',
        content: '帖子具体内容'
      }
    };
  },
  methods: {
    handleLike() {
      console.log('点赞');
    },
    handleCollect() {
      console.log('收藏');
    },
    handleComment() {
      console.log('评论');
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.username {
  font-size: 32rpx;
  color: #333;
}

.post-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.post-image {
  width: 100%;
}

.post-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-top: 15rpx;
}

.interaction-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 40rpx;
}
</style>
